<template>
	<el-container>
		<el-header class='x-header'>
			<b class="title">{{ page_info.title }}</b>
			<el-button v-if="$route.query.callback_url" size="mini" icon="el-icon-back" @click="g_page.funcBack">
				返回
			</el-button>
			<!--			<el-button size="mini" type="warning" icon="el-icon-edit-outline" @click="funcApply">审核</el-button>-->
			<el-button size="mini" icon="el-icon-refresh" @click="g_page.funcReload()">刷新</el-button>
		</el-header>
		<el-main class='x-main'>
			<el-form :inline="true" :model="form_q" size="mini">
				<el-form-item label="姓名">
					<el-input name="compKw" v-model="form_q.compKw" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input name="compPhone" v-model="form_q.compPhone" placeholder="手机号"></el-input>
				</el-form-item>
				<el-form-item label="审核状态">
					<el-select filterable v-model="form_q.compApply" placeholder="请选择">
						<el-option label="全部" key="all" value="all"></el-option>
						<el-option v-for="(v, k) in page_info.enable"
								   :label="v"
								   :key="k"
								   :value="k">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="g_page.funcSearch">搜索</el-button>
				</el-form-item>
			</el-form>
			<div class="table-wrap">
				<el-table stripe ref="multipleTable" tooltip-effect="dark"
						  @selection-change="g_page.funcTableSelectionChange"
						  :data="list_data">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="姓名">
						<template slot-scope="data">
							<div v-html="data.row.cuser_name"></div>
							<!--							<div v-html="data.row.cuser_openid"></div>-->
							<div style="color:red;" v-if="data.row.cuser_ensure_order==1">存在违章</div>
						</template>
					</el-table-column>
					<el-table-column label="手机号">
						<template slot-scope="data">
							<div v-html="data.row.cuser_phone"></div>
						</template>
					</el-table-column>
					<el-table-column label="身份证">
						<template slot-scope="data">
							<div v-html="data.row.cuser_idcard"></div>
						</template>
					</el-table-column>
					<el-table-column label="驾驶证号">
						<template slot-scope="data">
							<div v-html="data.row.cuser_car_no"></div>
						</template>
					</el-table-column>
					<el-table-column label="余额">
						<template slot-scope="data">
							<div v-html="data.row.wxuser_money"></div>
						</template>
					</el-table-column>
					<el-table-column label="证件有效期">
						<template slot-scope="data">
							<div v-html="data.row.car_end_date"></div>
							<div style="color:red;" v-if="data.row.card_expire">已过期</div>
						</template>
					</el-table-column>
					<el-table-column label="审核状态">
						<template slot-scope="data">
							<div style="font-size: 12px;">
								<div>{{ data.row.enable }}</div>
								<div v-if="data.row.cuser_enable!=0">
									<div>{{data.row.cuser_enable_date}}</div>
									<div style="color:blue;">审核人：{{ data.row.acc_name }}</div>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="保证金">
						<template slot-scope="data">
							<div style="color:red;" v-if="data.row.cuser_ensure==0">未交</div>
							<div v-else>
								<div>
									<b style="color:blue;">
										{{ data.row.ensure_price_left }}
									</b>
									/ {{ data.row.cuser_ensure_price }}
								</div>
								<div style="color:red;" v-if="data.row.cuser_ensure==10">退款中</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="进行中订单">
						<template slot-scope="data">
							<div v-if="data.row.cuser_order_id__hot!=''">
								{{ data.row.cuser_order_id__hot }}
							</div>
							<div v-else>无</div>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="data">
							<el-button type="text" size="mini" @click="g_page.funcRedirectEdit('app_car__user__edit',data.row)">
								详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<a target="_blank"></a>
			</div>
		</el-main>
		<!---->
		<!---->
		<!-- 分页 -->
		<el-footer v-if="page_show" class="x-page">
			<el-pagination class="paging" background layout="total, sizes, prev, pager, next, jumper"
						   @current-change="g_page.funcPageChange" :page-sizes="[page_size]"
						   :current-page="page_index" :page-size="page_size" :total="page_total">
			</el-pagination>
		</el-footer>
		<!---->
		<!---->
		<!-- 弹框 -->
		<el-dialog title="客户审核" :visible.sync="form_dialog_visible" width="70%">
			<el-form ref="form" :rules="form_rules" :model="form" size="mini" label-width="15%">
				<el-form-item label="审核描述">
					<el-input v-model="form.desc"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="g_page.funcBack" size="mini">取消</el-button>
				<el-button type="success" @click="g_page.funcSave" size="mini">保存</el-button>
			</div>
		</el-dialog>
		<!---->
		<!---->
		<!---->
	</el-container>
</template>


<script>
	import {
		Message,
		MessageBox,
		Loading
	} from 'element-ui'

	export default {
		data() {
			let page_data = { super_uid: '' }
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			//
			return page_data
		},
		mounted() {
			console.log('mounted')
			//
			this.g_page.funcSetVue(this)
			// 应用ID
			this.g_page.funcSetApiUrlList('/xadmin/app_car/app_car__user__list')
			// this.g_page.funcSetApiUrlDel('/xadmin/app_car/app_car__user__list/del')
			//页码
			this.g_page.funcSetPageSize(20)
			//搜索
			this.form_q = {
				'compKw': ''
			}
			this.g_page.funcGetList()
			//
			this.form_rules = {
				acc_uidX: [
					{
						required: true,
						message: '必填',
						trigger: 'blur'
					}
				]
			}
			//
		},
		methods: {
			////////////////////
			//审核
			funcApply() {
				let ids = this.g_page.funcGetIds()
				if (ids == '') {
					this.g_cc.func_alert('至少选择一项', 'info')
					return
				}
				// this.$prompt('审核描述', '客户审核', {
				// 	confirmButtonText: '通过',
				// 	cancelButtonText: '不通过',
				// 	showCancelButton: true,
				// 	distinguishCancelAndClose: true
				// }).then(({ value }) => {
				// 	// this.funcApplyApi(1)
				// 	console.log(value)
				// }).catch((action, value) => {
				// 	console.log(action)
				// 	console.log(value)
				// 	if (action === 'cancel') {
				// 		// this.funcApplyApi(10)
				// 	}
				// })
				// MessageBox({
				// 	title: '提示',
				// 	message: '客户审核',
				// 	type: 'info',
				// 	showCancelButton: true,
				// 	confirmButtonText: '通过',
				// 	cancelButtonText: '不通过',
				// 	dangerouslyUseHTMLString: true,
				// 	distinguishCancelAndClose: true
				// }).then(() => {
				// 	this.funcApplyApi(1)
				// }).catch((action) => {
				// 	if (action === 'cancel') {
				// 		this.funcApplyApi(10)
				// 	}
				// })
			},
			funcApplyApi(apply) {
				let ids = this.g_page.funcGetIds()
				this.g_cc.func_axios({
					url: '/xadmin/app_car/app_car__user__list/apply',
					data: {
						ids: ids,
						apply: apply
					},
					success: (res) => {
						//
						if (res.data.errcode == 0) {
							this.g_cc.func_alert('成功', 'success', () => {
								this.g_page.funcGetList()
							})
						} else {
							this.g_cc.func_alert(res.data.errmsg)
						}
					}
				})
			}
			////////////////////
		}
	}
</script>

